// 色系Colors
@use "sass:math";

// Colors
$color-black: #000000;
$color-white: #ffffff;
$color-light-white: #fefefe;
$color-grey: #67757f;
$color-light-grey: #EFEFEF;

// $color-bg-primary: #54CBFF;
// $color-bg-unknown: #AFAEAE;
// $color-bg-error: #dd524d;
// $color-bg-warning: #f0ad4e;
// $color-bg-sucess: #4cd964;

// Fonts
$font-family: Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, Microsoft YaHei,
  Helvetica Neue, Helvetica, Arial, sans-serif;
// $font-family: Avenir, Helvetica, Arial, sans-serif;
$font-size-default: 1rem;
$font-size-logo: 1.3rem;
$font-size-header: 1rem;

// header
$header-height: 60px;
$header-padding: 0 3% 0 0;
$header-margin: 0;
$header-logo-width: 10%;
$header-logo-margin: 0 10px;
$header-nav-padding: 0 0.5rem;
$header-nav-margin: 0 0.5rem;
$header-search-radius: 10px;
$header-search-height: $header-height - 20px;
$header-search-max-width: 25vw;
$header-search-min-width: 200px;
$header-search-btn-height: (
  $header-height * 0.5
);
$header-search-btn-width: 60px;
$header-user-width: math.div($header-height, 2.7);
$header-user-margin: 1rem;
$header-user-radius: 50%;
$header-menu-width: 150px;
$header-menu-padding: 7px 0px;
$header-menu-radius: 4px;

// page
$content-padding: 0 8% 20px 8%;
$border-radius-songlist: 12px;

// footer
$footer-height: 100px;

// current-play
$current-play: 350px;

// play-bar
$play-bar-height: 60px;

// style
$box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);

// Media queries
$sm: 668px;
$bg: 1024px;
$md: 1300px;
$lg: 1450px;